import React, {Component} from 'react';
import {Button, Icon, Menu} from "antd";
import {NavLink} from "react-router-dom";
const ButtonGroup = Button.Group;
const {SubMenu} = Menu;

class MyHeader extends Component {

    // 状态合集
    state = {
        role: 1,
        user_id: -1,
        username: "测试账户",
    }

    componentDidMount() {
        let user_id = localStorage.getItem("userInfo:user_id");
        let username = localStorage.getItem("userInfo:username");
        let role = localStorage.getItem("userInfo:role");
        this.setState({
            user_id, username, role: parseInt(role, 10)
        })
    }

    // 点击发布按钮的事件
    onClickPublish = () => {
        let { onClickPublish } = this.props;
        if (onClickPublish) onClickPublish();
    }

    // 点击保存按钮发生的事件
    onClickSave = () => {
        let { onClickSave } = this.props;
        if (onClickSave) onClickSave();
    }

    // 点击仿真按钮发生的事情
    onClickRun = () => {
        let { onClickRun } = this.props;
        if (onClickRun) onClickRun();
    }

    render() {
        const {pathname} = this.props;
        let { username, role } = this.state;
        // console.log("MyHeader: render: pathname", pathname);
        return (
            <div style={{height: 48, width: '100vw', borderBottom: '1px solid #e8e8e8'}}>
                <Menu mode="horizontal" style={{width: 500, float: 'left'}} onClick={()=>{}}>
                    <Menu.Item disabled={true} style={{marginBottom: -10, marginLeft: 10}}><h2>组态管理系统</h2></Menu.Item>
                    <SubMenu title={"组态管理"}>
                        <Menu.Item key="new_img_work"><NavLink to="/main/new_img_work">新建组态</NavLink></Menu.Item>
                        <Menu.Item key="my_img_work"><NavLink to="/main/my_img_work">我的组态</NavLink></Menu.Item>
                        {role === 0 && <Menu.Item key="all_img_work"><NavLink to="/main/all_img_work">所有组态</NavLink></Menu.Item>}
                    </SubMenu>
                    <SubMenu title={"仿真管理"}>
                        <Menu.Item key="new_logic_work"><NavLink to="/main/new_logic_work">新建仿真</NavLink></Menu.Item>
                        <Menu.Item key="my_logic_work"><NavLink to="/main/my_logic_work">我的仿真</NavLink></Menu.Item>
                        {role === 0 && <Menu.Item key="all_logic_work"><NavLink to="/main/all_logic_work">所有仿真</NavLink></Menu.Item>}
                    </SubMenu>
                    <SubMenu title={"组件管理"}>
                        <Menu.Item key="my_img_component"><NavLink to="/main/my_img_component">我的组态组件</NavLink></Menu.Item>
                        {role === 0 && <Menu.Item key="all_img_component"><NavLink to="/main/all_img_component">所有组态组件</NavLink></Menu.Item>}
                        <Menu.Item key="my_logic_component"><NavLink to="/main/my_logic_component">我的仿真组件</NavLink></Menu.Item>
                        {role === 0 && <Menu.Item key="all_logic_component"><NavLink to="/main/all_logic_component">所有仿真组件</NavLink></Menu.Item>}
                    </SubMenu>
                    {role === 0 && <SubMenu title={"用户管理"}>
                        <Menu.Item key="new_user"><NavLink to="/main/new_user">新建用户</NavLink></Menu.Item>
                        <Menu.Item key="all_user"><NavLink to="/main/all_user">用户管理</NavLink></Menu.Item>
                    </SubMenu>}
                </Menu>
                {(pathname === "new_img_work" || pathname === "new_logic_work") && <ButtonGroup style={{float: 'right', right: 10, marginTop: 7}}>
                    <Button onClick={this.onClickSave}>
                        <Icon type="eye"/>保存
                    </Button>
                    {/*{pathname === "new_img_work" && <Button onClick={this.onClickPublish}>*/}
                    {/*    <Icon type="share-alt" />*/}
                    {/*    发布*/}
                    {/*</Button>}*/}
                    {pathname === "new_logic_work" && <Button onClick={this.onClickRun}>
                        <Icon type="share-alt" />
                        仿真
                    </Button>}
                </ButtonGroup>}
                {(username && username!=="")&&(<span style={{ float: "right", margin: 12 }}>欢迎您，{username}！</span>)}
            </div>
        );
    }
}

export default MyHeader;
